<template>
	<view class="sell-container">
		<!-- 顶部标题 -->
		<view class="header">
			<text class="title">卖书</text>
		</view>
		
		<!-- 步骤说明 -->
		<view class="steps">
			<view class="step-item">
				<text class="step-number">1</text>
				<text class="step-title">填写详情</text>
				<image class="step-image" src="/static/sell_01.png" mode="aspectFit"></image>
			</view>
			
			<view class="step-item">
				<text class="step-number">2</text>
				<text class="step-title">发货</text>
				<image class="step-image" src="/static/sell_02.png" mode="aspectFit"></image>
			</view>
			
			<view class="step-item">
				<text class="step-number">3</text>
				<text class="step-title">收到货款</text>
				<image class="step-image" src="/static/sell_03.png" mode="aspectFit"></image>
			</view>
		</view>
		
		<!-- 操作按钮 -->
		<view class="action-buttons">
			<button class="scan-btn" @click="handleScan">扫码卖书</button>
			<button class="manual-btn" @click="handleManual">手动输入</button>
		</view>
		
		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view 
				class="tab-item" 
				v-for="(tab, index) in tabs" 
				:key="index" 
				@click="handleTabClick(tab)"
				:class="{ active: tab.text === '卖书' }"
			>
				<text class="tab-icon">{{tab.icon}}</text>
				<text class="tab-text">{{tab.text}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: [
					{ icon: '🏛️', text: '主页' },
					{ icon: '📖', text: '卖书' },
					{ icon: '🛒', text: '购物车' },
					{ icon: '👤', text: '我的' }
				]
			}
		},
		methods: {
			handleScan() {
				// 调用扫码功能
				uni.scanCode({
					success: (res) => {
						uni.showToast({
							title: '扫描成功：' + res.result,
							icon: 'success'
						});
					},
					fail: () => {
						uni.showToast({
							title: '扫描失败',
							icon: 'error'
						});
					}
				});
			},
			handleManual() {
				uni.showToast({
					title: '跳转到手动输入页面',
					icon: 'none'
				});
			},
			handleTabClick(tab) {
				if (tab.text === '主页') {
					uni.switchTab({
						url: '/pages/home/home'
					});
				} else if (tab.text === '我的') {
					uni.switchTab({
						url: '/pages/my/my'
					});
				} else if (tab.text === '购物车') {
					uni.switchTab({
						url: '/pages/cart/cart'
					});
				}
			}
		}
	}
</script>

<style>
	.sell-container {
		min-height: 100vh;
		background-color: #FFFFFF;
		padding-bottom: 120rpx;
	}
	
	.header {
		background-color: #FF6B00;
		height: 200rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0 0 30rpx 30rpx;
	}
	
	.title {
		color: #FFFFFF;
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.steps {
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		gap: 60rpx;
	}
	
	.step-item {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}
	
	.step-number {
		width: 40rpx;
		height: 40rpx;
		background-color: #FF6B00;
		color: #FFFFFF;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		font-weight: bold;
	}
	
	.step-title {
		font-size: 32rpx;
		color: #333333;
		font-weight: bold;
		width: 160rpx;
	}
	
	.step-image {
		flex: 1;
		height: 200rpx;
		border-radius: 16rpx;
	}
	
	.step-item:first-child .step-image,
	.step-item:nth-child(2) .step-image,
	.step-item:nth-child(3) .step-image {
		background-color: #FFF6F0;
	}
	
	.action-buttons {
		padding: 40rpx;
		display: flex;
		gap: 20rpx;
	}
	
	.scan-btn, .manual-btn {
		flex: 1;
		height: 90rpx;
		line-height: 90rpx;
		border-radius: 45rpx;
		font-size: 32rpx;
		border: none;
	}
	
	.scan-btn {
		background-color: #FF6B00;
		color: #FFFFFF;
	}
	
	.manual-btn {
		background-color: #EEEEEE;
		color: #333333;
	}
	
	.tab-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		height: 100rpx;
		background: #FFFFFF;
		display: flex;
		justify-content: space-around;
		align-items: center;
		border-top: 1rpx solid #EEEEEE;
	}
	
	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6rpx;
	}
	
	.tab-icon {
		font-size: 40rpx;
	}
	
	.tab-text {
		font-size: 24rpx;
		color: #333333;
	}
	
	.tab-item.active .tab-text {
		color: #FF6B00;
	}
</style> 